<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		
		
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>

		<link rel="stylesheet" type="text/css" href="style/style.css"/>
		<style type="text/css">
			
			body{
				background: #EDF2F6;
			}
			.dateIcon{
				width: 100px;
				border: 1px solid #C9CDD0;
			}
		</style>
	</head>

	<body>
		<div class="Content_win">
			<div class="content_1" style="width: 230px;float: right; background: none;">
				<div id="container2" style="width: 230px; height: 320px; margin: 0 auto;border-radius: 0;box-shadow: none;background: #fff;float: right;"></div>
				<div class="content_1" style="width: 230px;">
					<div class="title">
						<span>流量来源</span>
						<div class="clear"></div>
					</div>
					<div id="container" style="width: 230px; height: 225px; margin: 0 auto;background: #fff;"></div>
					
				</div>
				
			</div>
			
			<div class="content_1" style="width: 750px;">
				<div class="title">
					<span>访问统计（单位：人）</span>
					<div class="clear"></div>
				</div>
				<ul class="user_data">
					<li>
						<p style="background-position: 20px 10px;">新增用户</p>
						<span>58267</span>
					</li>
					<li style="background: #55CE87;">
						<p style="border-color: #64D691;background-position: 20px -15px;">积累用户</p>
						<span>58267</span>
					</li>
					<li style="margin: 0;background: #63D1E2;">
						<p style="border-color: #70D7E8;background-position: 0px -44px;">过去7天活跃用户</p>
						<span>58267</span>
					</li>
					<!--<li style="margin: 0;background: #FD7B7B;">
						<p style="border-color: #FF8686;background-position: 0px -75px;">过去30天活跃用户</p>
						<span>58267</span>
					</li>-->
					<div class="clear"></div>
				</ul>
				<div class="clear"></div>
			</div>
			
			<div class="content_1" style="width: 750px;">
				<div class="title">
					<span>用户管理（单位：人）</span>
					<div class="clear"></div>
				</div>
				<ul class="user_data">
					<li style="background: #63BDF2;width: 345px;">
						<p style="border-color:#7ED1FF;background: none;">待处理</p>
						<span>45</span>
					</li>
					<li style="margin: 0;background: #FF956E;width: 345px;">
						<p style="border-color: #FFA583;background: none;">已处理</p>
						<span>57</span>
					</li>
					<div class="clear"></div>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="content_1" style="width: 750px;background: none;box-shadow: none;border: 0;">
				<ul class="menu">
					<li>
						<p style="background: url(style/menu01.png) no-repeat center 100%;"></p>
						<span>基本设置</span>
					</li>
					<li>
						<p style="background: url(style/menu02.png) no-repeat center 100%;"></p>
						<span>首页导航</span>
					</li>
					<li class="nom">
						<p style="background: url(style/menu03.png) no-repeat center 100%;"></p>
						<span>产品模块</span>
					</li>
					<li>
						<p style="background: url(style/menu04.png) no-repeat center 100%;"></p>
						<span>用户管理</span>
					</li>
					<li>
						<p style="background: url(style/menu05.png) no-repeat center 100%;"></p>
						<span>添加文章</span>
					</li>
					<li class="nom">
						<p style="background: url(style/menu06.png) no-repeat center 100%;"></p>
						<span>底部导航</span>
					</li>
					
					
					<div class="clear"></div>
				</ul>
			</div>
			
			<div class="clear"></div>
		</div>
		
	<script type="text/javascript">
		var chart;
    
	    $(document).ready(function () {
	    	
	    	// Build the chart
	        $('#container').highcharts({
	            chart: {
	                plotBackgroundColor: null,
	                plotBorderWidth: null,
	                plotShadow: false
	            },
	            title: {
	                text: ''
	            },
	            tooltip: {
	        	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	            },
	            plotOptions: {
	                pie: {
	                    allowPointSelect: true,
	                    cursor: 'pointer',
	                    dataLabels: {
		                    enabled: false,
		                    color: '#000000',
		                    connectorColor: '#000000',
		                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
		                },
	                    showInLegend: true
	                }
	            },
	            series: [{
	                type: 'pie',
	                name: '份额：',
	                data: [
	                    ['搜索引擎',	30],
	                    ['直接访问',	16],
	                    ['微信',		54]
	                ]
	            }],
	            colors:["#63BDF2","#FF936D","#F5C465"]
	        });
	    });
		$('#container2').highcharts({
    
            chart: {
                type: 'column'
            },
    
            title: {
                text: '营养含量'
            },
    
            xAxis: {
                categories: ['苹果', '橙子']
            },
    
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: ''
                }
            },
    
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        '总量: '+ this.point.stackTotal;
                }
            },
    
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
    
            series: [{
                name: '维生素A',
                data: [5, 3],
                stack: 'male'
            }, {
                name: '维生素B',
                data: [3, 4],
                stack: 'male'
            }],
            colors:["#6CAFE3","#55CE87"]
        });
    

	</script>
	</body>

</html>